<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四下第6课《数据解码》解码小游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-effect {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .bounce-in {
            animation: bounceIn 0.6s ease-out;
        }
        
        @keyframes bounceIn {
            0% {
                transform: scale(0.3);
                opacity: 0;
            }
            50% {
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        .pulse-animation {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: .5;
            }
        }
        
        .cell {
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .cell:hover {
            transform: scale(1.1);
            background-color: rgba(255, 235, 59, 0.5) !important;
        }
        
        .binary-cell {
            width: 40px;
            height: 40px;
            text-align: center;
            vertical-align: middle;
            font-weight: bold;
            border-radius: 4px;
        }
    </style>
</head>
<body class="gradient-bg min-h-screen flex items-center justify-center">
    <div class="absolute inset-0 bg-black opacity-10"></div>
    
    <!-- 游戏内容 -->
    <div id="gameContent" relative z-10">
        <div class="card-effect rounded-2xl p-8 shadow-2xl text-center w-full max-w-4xl mx-4">
            <!-- 游戏标题 -->
            <div class="mb-6">
                <h1 class="text-4xl font-bold text-gray-800 mb-2">🔍 解码小游戏</h1>
                <p class="text-gray-600">四下第6课《数据解码》解码小游戏</p>
            </div>
            
            <!-- 提示信息 -->
            <div class="bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded-lg mb-6">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
                    </div>
                    <div class="text-left">
                        <p class="font-medium mb-1 text-xl">游戏说明：</p>
                        <p class="text-base">将一组二进制数据进行解码，"0"代表白色，"1"代表黑色。</p>
                    </div>
                </div>
            </div>
            
            <!-- 计时器 -->
            <div class="bg-gradient-to-r from-green-400 to-teal-500 rounded-lg p-4 mb-6 flex items-center justify-center shadow-lg">
                <i class="fas fa-clock text-white mr-2"></i>
                <span class="text-lg font-medium text-white mr-2">时间：</span>
                <span class="text-lg font-bold text-yellow-300" id="timerText">0.00</span>
                <span class="text-lg font-medium text-white ml-1">秒</span>
            </div>
            
            <!-- 控制按钮 -->
            <div class="flex justify-center mb-6">
                <div class="flex space-x-4">
                    <button id="submitButton" onclick="checkResult()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <i class="fas fa-check mr-2"></i>提交
                    </button>
                    <button onclick="resetTable()" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-gray-500">
                        <i class="fas fa-redo mr-2"></i>重置
                    </button>
                </div>
            </div>
            
            <!-- 游戏区域 -->
            <div class="flex justify-center">
                <div class="w-1/2 pr-4">
                    <div class="bg-white rounded-xl p-4 shadow-lg">
                        <h3 class="text-lg font-bold text-gray-800 mb-3 flex items-center">
                            <i class="fas fa-code text-blue-600 mr-2"></i>二进制数据
                        </h3>
                        <table class="table-auto border-collapse border border-gray-300 mx-auto">
                            <tbody id="leftTable">
                                <!-- 左侧表格将由 JavaScript 生成 -->
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="w-1/2 pl-4">
                    <div class="bg-white rounded-xl p-4 shadow-lg">
                        <h3 class="text-lg font-bold text-gray-800 mb-3 flex items-center">
                            <i class="fas fa-paint-brush text-blue-600 mr-2"></i>解码结果
                        </h3>
                        <table class="table-auto border-collapse border border-gray-300 mx-auto">
                            <tbody id="rightTable">
                                <!-- 右侧表格将由 JavaScript 生成 -->
                            </tbody>
                        </table>
                        <div id="result" class="w-full mt-4"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    <script>
        // 生成左侧表格的数据
        const leftTableData = [
            [0, 0, 0, 0, 1, 0, 0, 0, 0],
            [0, 0, 0, 0, 1, 0, 0, 0, 0],
            [0, 0, 1, 1, 1, 1, 1, 0, 0],
            [0, 0, 1, 0, 1, 0, 1, 0, 0],
            [0, 0, 1, 1, 1, 1, 1, 0, 0],
            [0, 0, 0, 0, 1, 0, 0, 0, 0],
            [0, 0, 0, 0, 1, 0, 0, 0, 0]
        ];
        
        var timer = null;
        var milliseconds = 0;
        var gameCompleted = false;

        function startTimer() {
            timer = setInterval(function() {
                milliseconds++;
                document.getElementById('timerText').innerHTML = (milliseconds / 100).toFixed(2);
            }, 10);
        }

        function stopTimer() {
            clearInterval(timer);
        }

        function initTables() {
            const leftTable = document.getElementById('leftTable');
            for (let i = 0; i < leftTableData.length; i++) {
                let row = document.createElement('tr');
                for (let j = 0; j < leftTableData[i].length; j++) {
                    let cell = document.createElement('td');
                    cell.textContent = leftTableData[i][j];
                    // 左侧表格只显示数字，不设置背景色
                    cell.style.backgroundColor = 'white';
                    cell.style.color = 'black';
                    // 添加样式类
                    cell.classList.add('binary-cell', 'border', 'border-gray-300', 'font-bold');
                    row.appendChild(cell);
                }
                leftTable.appendChild(row);
            }

            // 生成空的右侧表格
            const rightTable = document.getElementById('rightTable');
            for (let i = 0; i < 7; i++) {
                let row = document.createElement('tr');
                for (let j = 0; j < 9; j++) {
                    let cell = document.createElement('td');
                    // 添加样式类
                    cell.classList.add('binary-cell', 'border', 'border-gray-300', 'cell');
                    // 初始设置为白色
                    cell.style.backgroundColor = 'white';
                    cell.addEventListener('click', function() {
                        if (gameCompleted) return;
                        
                        if (this.style.backgroundColor === 'black' || this.style.backgroundColor === 'rgb(0, 0, 0)') {
                            this.style.backgroundColor = 'white';
                        } else {
                            this.style.backgroundColor = 'black';
                        }
                    });
                    row.appendChild(cell);
                }
                rightTable.appendChild(row);
            }
        }

        // 检查右侧表格是否与左侧表格匹配
        function checkResult() {
            if (gameCompleted) return;
            
            let leftCells = document.querySelectorAll('#leftTable td');
            let rightCells = document.querySelectorAll('#rightTable td');
            let correct = true;

            leftCells.forEach((leftCell, index) => {
                let rightCell = rightCells[index];
                const leftValue = leftCell.textContent;
                const rightColor = rightCell.style.backgroundColor;
                
                if (leftValue === '0' && (rightColor !== 'white' && rightColor !== '' && rightColor !== 'rgb(255, 255, 255)')) {
                    correct = false;
                } else if (leftValue === '1' && (rightColor !== 'black' && rightColor !== 'rgb(0, 0, 0)')) {
                    correct = false;
                }
            });

            var resultElement = document.getElementById('result');
            var submitButton = document.getElementById('submitButton');
            
            if (correct) {
                stopTimer();
                gameCompleted = true;
                resultElement.innerHTML = '<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg flex items-center"><i class="fas fa-check-circle mr-2"></i>恭喜你！成功解码！用时 ' + (milliseconds / 100).toFixed(2) + ' 秒。</div>';
                // 禁用提交按钮
                submitButton.disabled = true;
                submitButton.classList.add('bg-gray-500', 'hover:bg-gray-500');
                submitButton.classList.remove('bg-blue-600', 'hover:bg-blue-700');
            } else {
                resultElement.innerHTML = '<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg flex items-center"><i class="fas fa-exclamation-circle mr-2"></i>答错了！再想一想！</div>';
            }
        }

        // 将右侧表格重置为全白
        function resetTable() {
            if (gameCompleted) return;
            
            let rightCells = document.querySelectorAll('#rightTable td');
            rightCells.forEach(cell => {
                cell.style.backgroundColor = 'white';
            });
            
            // 清空结果
            document.getElementById('result').innerHTML = '';
            
            // 重置计时器
            stopTimer();
            milliseconds = 0;
            document.getElementById('timerText').innerHTML = '0.00';
            startTimer();
        }

        window.onload = function() {
            initTables();
            startTimer();
            
        };
    </script>
</body>
</html>